<template>
    <div class="order">
        <van-nav-bar title="提交订单" left-text="返回" left-arrow @click-left="$router.go(-1)" />

        <div class="title">收货信息:</div>

        <div class="editInfo">
            <van-field v-model="name" label="姓名" placeholder="请输入姓名" />
            <van-field v-model="tel" type="tel" label="电话" placeholder="请输入手机号" />
            <van-field v-model="addres" label="详细地址" placeholder="请输入详细地址" />
        </div>

        <div class="goodsCard">
            <ul>
                <li v-for="(item, index) in goodsList" :key="index">
                    <van-card :num="item.g_num" :price="item.g_price" 
                    :desc="item.g_content" :title="item.g_name" 
                    :thumb="item.g_pic" />
                </li>
            </ul>
        </div>

        <div class="coupon">
            <van-cell title="无优惠券" is-link />
        </div>


        <van-divider>猜你喜欢</van-divider>
        <Like></Like>


        <div class="footer">
            <!-- @submit="onSubmit" -->
            <van-submit-bar :price="total.price" button-text="支付" tip-icon="info-o" @submit="subOrder">
                <template #tip>
                    此订单24小时内未付款将自动关闭
                </template>
                <div class="total">共<span>{{ total.num }}</span>件商品</div>
            </van-submit-bar>
        </div>
    </div>
</template>

<script>
import Like from '@/components/home/Like.vue';
import { mapState, mapGetters } from 'vuex';
import { submitOder } from '@/api/userAccount/submitOrder';

import { Toast, Notify  } from 'vant';

export default {


    data() {
        return {
            name: '',
            tel: '',
            addres: '',
            item : []
        }
    },
    components:{
        Like
    },
    created() {
        this.item = JSON.parse(this.$route.query.detail)
        console.log(this.item);
        
    },
    methods: {
        // 提交订单，进入支付
        async subOrder(){
            if(this.name == '' || this.tel == '' || this.addres == ''){
                return Toast.fail('请填写完整收货信息');
            }

            // 调用接口提交订单
            const username = localStorage.getItem('userName');
            console.log(this.goodsList);

            const {g_id, g_name,g_num, g_price, g_pic} = this.goodsList[0];
            const totalPrice = g_num * g_price;
            
            const res = await submitOder(g_id, g_name, totalPrice, g_num, g_pic, username, this.name, this.tel, this.addres)
            console.log(res);
            
            if (res.status == 200){
                
                Notify({ type: 'primary', message: '支付成功' });
                this.$router.push('/home')
            }else{
                Notify({ type: 'danger', message: '支付失败' });
            }
            
        }



    },
    computed:{
        ...mapState({
            list: state => state.cart.list
        }),
        goodsList () {
            return this.item.map(id =>{
                return this.list.find(v => v.id == id)
            })
        },

        ...mapGetters(['total'])
    }
}

</script>

<style scoped>
.order {
    background-color: #f4f4f4;
}

.title {
    color: rgba(0, 0, 0, 0.575);
    font-size: 16px;
    padding-left: 1em;
    padding-top: 9px;
    padding-bottom: 9px;
    font-weight: 550;
}

.editInfo {
    display: block;
}

.goodsCard {
    margin-top: 14px;
}

.goodsCard ul li {
    margin-bottom: 5px;
}

.van-card {
    padding: 18px 16px;
    font-size: 16px;
    background-color: #fff;
}
.van-card[data-v-6df06484]{
    padding: 28px 16px;
}

.coupon{
    margin-top: 6px;
    padding: 7px 0;
    font-size: 18px;
}
.van-cell{
    font-size: 16px;
}
.coupon .van-cell{
    font-size: 16px;
}


.van-submit-bar__bar {
    height: 75px;
}


.van-submit-bar__button {
    width: 122px;
    height: 45px;
}

.total{
    font-size: 18px;
}
.total span{
    color: red;
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
}

.van-submit-bar__bar[data-v-6df06484]{
    height: 79px;
}
</style>